<template>
	<view>


		<view class="" style="margin-top: 10px;" v-if="datalist.length > 0">
			<view class=""
				style="padding: 30rpx;box-shadow: 1px 1px 4px 1px #ccc;width: 85%;margin: 0px auto;border-radius: 20rpx;"
				v-for="(item,index) in datalist">
				<view class="" style="display: flex;justify-content: space-between;align-items: center;"  @click="gourl">
					<view class="">
						患者：{{item.username}}（{{item.usertel}}）
					</view>
					<view class="">
						<!-- 待支付 -->
						<!-- {{{item.status == 1 ? '待支付' : item.status == 2 ? '检测中' : item.status == 3 ? '已完成' : '已取消'}} -->
						<text v-if="item.status == 1">待支付</text>
						<text v-if="item.status == 2">检测中</text>
						<text v-if="item.status == 3">已完成</text>
						<text v-if="item.status == 4">已取消</text>
					</view>
				</view>
				<view class=""  @click="gourl"
					style="display: flex;justify-content: space-between;align-items: center;font-size: 24rpx;color: #9e9e9e;margin-top: 20rpx;">
					<view class="">
						单号：{{item.order_id}}
					</view>
					<view class="">
						{{item.createtime}}
					</view>
				</view>
				<view class="xian"></view>

				<view class="" style="display: flex;justify-content: space-between;align-items: center;"
					v-for="(it,id) in item.items"  @click="gourl">
					<view class="">
						{{id+1}}、{{it.name}}
					</view>
					<view class="">
						￥{{it.price}}
					</view>
				</view>
				<view class=""   @click="gourl"
					style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					<view class="">

					</view>
					<view class="" style="color: red;">
						合计:￥{{item.pay_money}}
					</view>
				</view>
				<view class="xian" v-if="item.pay_status == 0"></view>
				<!-- <view class="" v-if="is_login == 1 && item.pay_status == 0" style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					<view class="">

					</view>
					<view class="btn_b" @click="canceorder(item.id)">
						取消订单
					</view>

				</view> -->

				<view class="" v-if="is_login == 1 && item.pay_status == 0" @click="pay_order(item.id)"
					style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					<view class="btn_c">
						立即支付
					</view>
				</view>
				<button v-if="is_login == 0 && item.pay_status == 0" class="btn_c2" style="margin-top: 20rpx;"
					open-type="getPhoneNumber" @getphonenumber="hz_getphonenumber">
					登录
				</button>
			</view>
		</view>
		<view class="ccc" v-else>
			<image src="../../static/incomeDetail/wushiju.png" mode="" style="width: 100%;height: 100%"></image>
		</view>
	</view>
</template>

<script>
	var md5 = require('../../components/md5.js')
	export default {
		data() {
			return {
				nav_index: 0,
				datalist: [],
				keywords: '',
				orderid: '',
				is_login: 0,
				paytype: 2, // 默认随行付支付
			}
		},
		onLoad(options) {
			if (!options.scene) {
				return uni.showToast({
					title: '请扫码进入'
				})
			}
			this.getpaytype()
			this.orderid = options.scene
			this.getdata()
			console.log('患者TOKEN' + uni.getStorageSync('hz_token'))
			// if(!uni.getStorageSync('hz_token')){
			// 	// 让他去登录
			// 	uni.switchTab({
			// 		url:'/pages/login/login'
			// 	})
			// }else{
			// 	this.getdata()
			// }
			// 直接获取openid登录
			// this.morenlogin()

			let userinfo = uni.getStorageSync('hz_userinfo')
			if (!userinfo) {
				this.is_login = 0
				// uni.navigateTo({
				// 	url:'/pages/login/login'
				// })
			} else {
				this.is_login = 1
			}
			let that = this
			uni.$on('payresult', function(res) {
				console.log('收到消息')
				if (res.referrerInfo && res.referrerInfo.extraData) {
					// 用户点击【返回】按钮时可以收到的通知参数
					if (res.referrerInfo.extraData.payStatus === '0') {
						// 支付失败
						// ......
						console.log('支付失败')
					}
					if (res.referrerInfo.extraData.payStatus === '1') {
						// 支付成功
						// ......
						console.log('支付成功')
						that.page = 1
						that.datalist = []
						that.getdata()
					}
					if (res.referrerInfo.extraData.payStatus === '3') {
						// 用户取消支付
						// ......
						console.log('取消支付')
					}
				} else {
					// 不是通过点击【返回】按钮关闭半屏小程序时，可以通过场景值来判断是否是从另一个小程序返回的
					if (res.scene === 1038) {
						// 从另一个小程序返回
						// ......
					}
				}
			})
		},
		onShow() {


		},
		methods: {
			gourl(){
				uni.navigateTo({
					url:'/pages/checkorder/orderdetail?id='+this.orderid
				})
			},
			getpaytype() {
				let that = this
				// console.log('请求的status', that.nav_index)
				uni.showLoading({
					title: "加载中"
				})

				uni.request({
					url: that.global.url + 'api/index/getpaytype',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('hz_token')
					},
					data: {

					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							that.paytype = result.data
							// that.$refs.popup.open('center')

						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			// 患者端登录，获取手机号码
			hz_getphonenumber(e) {
				console.log(e)
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.login({
					success: function(loginRes) {
						uni.request({
							url: that.global.url + 'api/user/hz_login',
							method: 'POST',
							data: {
								code: e.detail.code,
								openidcode: loginRes.code
							},
							success(res) {
								let result = res.data
								console.log(result)
								// return false;
								if (result.code == 1) {
									// 存用户信息
									uni.setStorageSync('hz_userinfo', result.data.userinfo)
									// 存用户信息
									uni.setStorageSync('hz_token', result.data.userinfo.token)

									that.is_login = 1
								} else {
									uni.showToast({
										title: result.msg,
										icon: 'none'
									})
								}
							},
							complete() {
								uni.hideLoading()
							}
						})
					}
				});
			},
			pay_order(id) {
				let that = this
				console.log('请求的status', that.nav_index)
				uni.showLoading({
					title: "加载中"
				})
				let payurl = ''
				if (that.paytype == 1) {
					payurl = 'api/device/order_pay_wx'
				} else if (that.paytype == 2) {
					payurl = 'api/device/order_pay_sxf'
				}
				uni.request({
					url: that.global.url + payurl,
					method: 'POST',
					header: {
						'token': uni.getStorageSync('hz_token')
					},
					data: {
						id: id,
						identity: 4
					},
					success(res) {
						let result = res.data

						console.log(result)
						if (result.code == 1) {
							if(that.paytype == 1){
								if (result.data.need_pay == 1) {
								
								
									let pay_key = result.data.pay_key
								
									// return false;
									//obj里面的key一定要是驼峰名称
									let obj = {
										appId: result.data.payinfo.appid,
										nonceStr: result.data.payinfo.noncestr,
										package: "prepay_id=" + result.data.payinfo.package,
										signType: 'MD5',
										timeStamp: result.data.payinfo.timestamp
									}
									//参数名ASCII码从小到大排序（字典序）
									let arr = Object.keys(obj).sort().map(item => {
										return `${item}=${obj[item]}`;
									});
									//最后拼接上key（商户密钥）得到字符串
									let str = arr.join('&') + '&key=' + pay_key;
									console.log(str);
									//对str进行MD5运算，再将得到的字符串所有字符转换为大写
									console.log(result.data.payinfo.timestamp)
									let paySign = md5.hexMD5(str).toUpperCase()
									wx.requestPayment({
										timeStamp: result.data.payinfo.timestamp.toString(),
										nonceStr: result.data.payinfo.noncestr,
										package: "prepay_id=" + result.data.payinfo.package,
										signType: 'MD5',
										paySign: paySign,
										success: function(res) {
											// 支付成功
											uni.showModal({
												title: '提示',
												content: '支付成功',
												showCancel: false,
												success: function(res) {
													if (res.confirm) {
														// uni.navigateBack({
														// 	delta: 2
														// })
														that.datalist = []
														that.getdata()
													}
												}
											})
										},
										fail: function(res) {
											// 支付失败
											console.log(res)
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											})
										}
									})
								} else {
									uni.showModal({
										title: '提示',
										content: '支付成功',
										showCancel: false,
										success: function(res) {
											that.datalist = []
											that.getdata()
										}
									})
								}
							}else{
								wx.openEmbeddedMiniProgram({
									appId: "wx652466ba7957d4fc",
									path: result.data.respData.path,
									envVersion: 'release',
									success(res) {
										// 打开成功
										console.log(res);
									}
								
								})
							}
							
						} else {
							uni.showModal({
								title: '提示',
								// 提示文字
								content: result.msg,
								// 取消按钮的文字自定义
								showCancel: false,
								// 确认按钮的文字自定义
								confirmText: "确认",
							
								success: function(res) {
									if (res.confirm) {
										// 执行确认后的操作
									} else {
										// 执行取消后的操作
									}
								}
							})

						}

					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			getdata() {
				let that = this
				console.log('请求的status', that.nav_index)
				uni.showLoading({
					title: "加载中"
				})
				uni.request({
					url: that.global.url + 'api/device/myorder',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('hz_token')
					},
					data: {
						status: that.nav_index,
						keyword: that.keywords,
						orderid: that.orderid
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							that.datalist = result.data
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			canceorder(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取消该订单吗？',
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							uni.showLoading({
								title: '加载中'
							})
							uni.request({
								url: that.global.url + 'api/device/cance_order',
								method: 'POST',
								header: {
									'token': uni.getStorageSync('hz_token')
								},
								data: {
									id: id
								},
								success(res) {
									let result = res.data
									console.log(result)
									if (result.code == 1) {
										// 存用户信息
										uni.showToast({
											title: result.msg,
											icon: 'none'
										})
										setTimeout(() => {
											that.getdata()
										}, 1000)
										that.getdata()
									} else {
										uni.showModal({
											title: '提示',
											// 提示文字
											content: result.msg,
											// 取消按钮的文字自定义
											showCancel: false,
											// 确认按钮的文字自定义
											confirmText: "确认",
										
											success: function(res) {
												if (res.confirm) {
													// 执行确认后的操作
												} else {
													// 执行取消后的操作
												}
											}
										})
									}
								},
								complete() {
									uni.hideLoading()
								}
							})
						} else {
							// 执行取消后的操作
						}
					}
				})


			},
			changenav(index) {
				this.nav_index = index
				this.getdata()
			}
		}
	}
</script>

<style>
	.topbox {
		padding: 30rpx;
		background-color: #1262DB;
	}

	.choice {
		color: #fff;
		font-weight: bold;
		border-bottom: 2px solid #fff;
		padding-bottom: 10rpx;
	}

	.cds {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0px auto;
		margin-top: 15px;
		color: #a7bbed;
		width: 93%;
	}

	.ccc {
		width: 30%;
		height: 227rpx;
		margin: 0px auto;
		margin-top: 30%;
	}

	.xian {
		border-bottom: 1px solid #e2e2e2;
		margin: 30rpx 0rpx;
	}

	.btn_b {
		border: 2px solid #1262DB;
		padding: 10rpx 20rpx;
		color: #1262DB;
		font-size: 28rpx;
		border-radius: 15rpx;
	}

	.btn_c {
		background: #1262DB;
		color: #fff;
		width: 100%;
		padding: 20rpx;
		text-align: center;
		margin-top: 15rpx;
		border-radius: 15rpx;
	}

	.btn_c2 {
		background: #1262DB;
		color: #fff;
		width: 100%;
		text-align: center;
		margin-top: 15rpx;
		border-radius: 15rpx;
	}
</style>